<!-- 模块说明 -->
<script setup lang='ts'>
// import {ref} from 'vue'
import { onMounted, ref } from 'vue'
import { Product } from "../../api/index.ts"

const list = ref<any[]>([]);

const getList = async () => {
  let res = await Product["list"]();
  console.log(res, "商品列表");
  list.value = res.data;
  console.log(list, "List");
}
onMounted(() => {
  getList();
});

</script>
<template>
  <div class="home">
    <!-- 轮播图 -->
    <div class="swiper">
      <van-swipe style="height: 180px" indicator-color="white" :show-indicators="false" autoplay="3000" loop>
        <van-swipe-item><img src="https://tgi1.jia.com/124/906/24906660.jpg" alt=""></van-swipe-item>
        <van-swipe-item><img
            src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0923%2Fe974e802j00qzvrtk0012c000go00cim.jpg&thumbnail=660x2147483647&quality=80&type=jpg"
            alt=""></van-swipe-item>
        <van-swipe-item><img
            src="https://img2.baidu.com/it/u=1153068947,2430980484&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
            alt=""></van-swipe-item>
        <van-swipe-item><img
            src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2022%2F0331%2F1693d6e5j00r9knsu003qd200u000iog00zk00m4.jpg&thumbnail=660x2147483647&quality=80&type=jpg"
            alt=""></van-swipe-item>
      </van-swipe>
    </div>

    <!-- 分类块 -->
    <div>
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
        选购商品
      </van-divider>
    </div>

    <!-- 商品列表 -->
    <div class="proList">
      <Pro v-for="item in list" :key="item.id" :info="item"></Pro>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.catetory {
  width: 100%;
  height: 180px;
}

.catetory>ul {
  display: flex;
  text-decoration: none;
  list-style: none;
  flex-wrap: wrap;

}

.catetory>ul>li {
  display: block;
  width: 60px;
  height: 50px;

  margin: 16px 16px;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}

.swiper img {
  width: 100%;
  height: 180px;
}

.proList {
  display: flex;
  flex-wrap: wrap;
}
</style>
